import React,{useState,useEffect} from 'react'
import homeStyle from '../assets/css/home.module.scss'
import {Layout,Menu} from 'antd'
import {WindowsOutlined,TrademarkCircleOutlined,UserOutlined} from '@ant-design/icons'
import {useNavigate,Outlet} from 'react-router-dom'

const {Header,Sider,Content,Footer}=Layout


export default function Home() {
  const [menuList,setMenuList]=useState([])
  const nav=useNavigate()
  useEffect(()=>{
    const list=[
      {
        key:'sub1',
        label:'日常业务',
        icon:<WindowsOutlined />,
        children:[
          {
            label:'学员管理',
            key:'/home/students'
          },
          {
            label:'班级管理',
            key:'/home/classes'
          }
        ]
      },
      {
        key:'sub2',
        label:'校区管理',
        icon:<TrademarkCircleOutlined />,
        children:[
          {
            label:'班主任管理',
            key:'/home/directors'
          },
          {
            label:'专业管理',
            key:'/home/subjects'
          }
        ]
      },
      {
        key:'sub3',
        label:'系统管理',
        icon:<UserOutlined />,
        children:[
          {
            key:'/home/users',
            label:'用户管理'
          }
        ]
      }
    ]
    setMenuList(list)
  },[])
  const go=(item)=>{
    nav(item.key)
  }
  return (
    <>
      <Layout>
          <Header>
            <div className={homeStyle.logo}>蜗牛BOSS管理系统</div>
          </Header>  
          <Layout style={{height:'750px'}}>
              <Sider>
                  <Menu 
                    items={menuList} 
                    onClick={go}
                    mode="inline"
                    theme="dark"
                    defaultOpenKeys={['sub1','sub2']}
                    defaultSelectedKeys={['/home/students']}></Menu>
              </Sider>
              <Content>
                  {/* 设置子路由出口 */}
                  <Outlet></Outlet>
              </Content>
          </Layout>
          <Footer style={{ textAlign: 'center'}}>Ant Design ©2023 Created by Ant UED</Footer>
      </Layout> 
    </>
  )
}
